<template>
  <chart
    :option="refChartOption"
    :style="{ height: `${chartHeight}` }"
    v-bind="$attrs"
    @zrender:click="pieRenderClickHandle"
  />
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue';
import { Chart, SeriesDataItem } from '@/components';
import { EChartOption } from 'echarts';
import { getSimpleOption } from './option';

export default defineComponent({
  props: {
    data: {
      type: Array as PropType<SeriesDataItem[]>,
      default: () => [],
    },
    height: {
      type: Number,
      default: 200,
    },
    heightType: {
      type: String,
      default: 'px',
    },
    fieldNames: {
      type: Object,
      default: () => ({
        name: 'name',
        value: 'value',
      }),
    },
    title: {
      type: String,
      default: '-',
    },
  },
  emits: ['zrender:click'],
  setup(props, { emit }) {
    const option = getSimpleOption();
    const refChartOption = ref(option);
    const chartHeight = computed(() => `${props.height}${props.heightType}`);
    const setChartOption = (data: any[]) => {
      const xAxis: string[] = [];
      const seriesData: EChartOption.SeriesPie.DataObject[] = [];
      let indexEl = ref<number>(0);
      data.forEach((item, index) => {
        if (indexEl.value == 13) {
          indexEl.value = 0;
        }
        const name = item[props.fieldNames.name];
        const value = item[props.fieldNames.value];
        item.label = {
          show: (function () {
            if (index < 5) {
              return true;
            } else {
              return false;
            }
          })(),
          // formatter: substringName,
          position: (function () {
            if (index < 5) {
              return 'outside';
            } else {
              return 'inside';
            }
          })(),
        };
        item.labelLine = {
          show: (function () {
            if (index < 5) {
              return true;
            } else {
              return false;
            }
          })(),
        };
        const seriesItem = {
          name,
          value,
        };
        item.center = ['4%', '30%']; //边框位置
        Object.keys(item).forEach(
          o =>
            ![props.fieldNames.name, props.fieldNames.value].includes(o) &&
            (seriesItem[o] = item[o]),
        );

        xAxis.push(name);
        seriesData.push(seriesItem);
        indexEl.value++;
      });
      refChartOption.value.series[0].data = seriesData;
    };

    const pieRenderClickHandle = e => {
      emit('zrender:click', e);
    };

    watch(
      () => props.data,
      () => {
        setChartOption(props.data);
      },
    );

    onMounted(() => {
      setChartOption(props.data);
    });
    return {
      chartHeight,
      refChartOption,
      setChartOption,
      pieRenderClickHandle,
    };
  },
  components: {
    Chart,
  },
});
</script>

<style lang="less" scoped>
// @import './index.less';
</style>
